<template>
  <div class="search-form">
    <t-form
      ref="form"
      :data="formData"
      layout="inline"
      @reset="onReset"
      @submit="onSubmit"
    >
      <t-row>
        <t-col :span="10">
          <t-row :gutter="[12, 12]">

                          <t-col :span="3">
              <t-form-item label="序号" name="index">
                <t-col :span="3">
                <t-input
                  v-model="formData.index"
                  placeholder="请输入序号"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
              <t-col :span="3">
              <t-form-item label="合同编号" name="no">
                <t-col :span="3">
                <t-input
                  v-model="formData.no"
                  placeholder="请输入合同编号"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
              <t-col :span="3">
              <t-form-item label="合同名称" name="name">
                <t-col :span="3">
                <t-input
                  v-model="formData.name"
                  placeholder="请输入合同名称"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
              <t-col :span="3">
              <t-form-item label="状态：1-草稿，2-审核中，3-已生效，4-已完成，5-已终止" name="status">
                <t-col :span="3">
                <t-input
                  v-model="formData.status"
                  placeholder="请输入状态：1-草稿，2-审核中，3-已生效，4-已完成，5-已终止"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
              <t-col :span="3">
              <t-form-item label="付款类型：1-一次性付款，2-分期付款，3-按进度付款" name="paymentType">
                <t-col :span="3">
                <t-input
                  v-model="formData.paymentType"
                  placeholder="请输入付款类型：1-一次性付款，2-分期付款，3-按进度付款"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
              <t-col :span="3">
              <t-form-item label="合同类型：1-采购合同，2-销售合同，3-服务合同" name="contractType">
                <t-col :span="3">
                <t-input
                  v-model="formData.contractType"
                  placeholder="请输入合同类型：1-采购合同，2-销售合同，3-服务合同"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
              <t-col :span="3">
              <t-form-item label="合同金额" name="amount">
                <t-col :span="3">
                <t-input-number
                  v-model="formData.amount"
                  placeholder="请输入合同金额"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
              <t-col :span="3">
              <t-form-item label="管理员姓名" name="adminName">
                <t-col :span="3">
                <t-input
                  v-model="formData.adminName"
                  placeholder="请输入管理员姓名"
                  clearable
                />
                </t-col>
              </t-form-item>
            </t-col>
      </t-row>
      <t-row :gutter="[24, 24]">
        <t-col :span="3" :offset="12">
          <t-form-item class="operation-form-item">
            <t-space>
              <t-button theme="primary" type="submit">搜索</t-button>
              <t-button theme="primary" @click="handleAdd">新增</t-button>
              <t-button theme="default" variant="base" type="reset">重置</t-button>
            </t-space>
          </t-form-item>
        </t-col>
      </t-row>
      </t-col>
      </t-row>
    </t-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { ContractInfo } from '@/api/contract';

const formData = ref<Partial<ContractInfo>>({});
const emit = defineEmits(['search', 'add']);

const onSubmit = () => {
  emit('search', { ...formData.value });
};

const onReset = () => {
  formData.value = {};
  emit('search', {});
};

const handleAdd = () => {
  emit('add');
};
</script>

<style lang="less" scoped>
.search-form {
  background-color: var(--td-bg-color-container);
  padding: 24px;
  margin-bottom: 16px;
  border-radius: var(--td-radius-medium);

  .operation-form-item {
    margin-right: 0;
    text-align: right;
    :deep(.t-form__item-content) {
      justify-content: flex-end;
      margin-left: auto;
    }
  }
}
</style> 